<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
        <div>巡查排查</div>
      </div>
    </header>
    <div class="contant">

      <div class="box">
        <div class="item">
          <div class="item-name">巡查类别</div>
          <div class="item-value" @click="openTypeTk" v-show="!typeChecked.id">请选择<img
              src="../../../assets/images/appa_r.png" /></div>
          <div class="item-value" @click="openTypeTk" v-show="typeChecked.id||typeChecked.id===0">
            {{typeChecked.dl_mc+'——'+typeChecked.mc}}</div>
        </div>
        <div class="item">
          <div class="item-name">巡查对象</div>
          <input type="text" class="item-value" placeholder="请输入" @click="clickValue($event)" />
        </div>
        <div class="item" v-show="!hasZxrw" @click="openZxrwTk">
          <div class="item-name">专项任务</div>
          <div class="item-value">
            <div class="item-add"><img src="../../../assets/images/plus.png" /></div>
          </div>
        </div>

        <div class="full-width-div" v-for="(item,index) of zxrwList" v-show="item.checked&&hasZxrw" @click="openZxrwTk">
          <div class="item">
            <div class="item-name">专项任务</div>
            <div class="item-value">
              {{item.name}}
            </div>
          </div>
          <div class="item" v-for="(v,ind) of item.list" v-show="v.checked">
            <div class="item-name">具体任务</div>
            <div class="item-value">
              {{v.name}}
            </div>
          </div>
        </div>

        <div class="item">
          <div class="item-name">参加人员</div>
          <div class="item-value" @click="openCyryTk" v-show="!hasCyry">
            <div class="item-add"><img src="../../../assets/images/plus.png" /></div>
          </div>
        </div>

        <div class="item" v-show="hasCyry" @click="openCyryTk">
          <div class="item-name">人数</div>
          <div class="item-value">
            <div class="item-add">{{cyryNum}}</div>
          </div>
        </div>
        <div class="item" v-show="hasCyry&&qujiNum>0" @click="openCyryTk">
          <div class="item-name">区级</div>
          <div class="item-value">
            {{getRymc(qujiList)}}
          </div>
        </div>
        <div class="item" v-show="hasCyry&&jiedaoNum>0" @click="openCyryTk">
          <div class="item-name">街道</div>
          <div class="item-value">
            {{getRymc(jiedaoList)}}
          </div>
        </div>
        <div class="item" v-show="hasCyry&&shequNum>0" @click="openCyryTk">
          <div class="item-name">社区</div>
          <div class="item-value">
            {{getRymc(shequList)}}
          </div>
        </div>


        <div class="item type-box"
          v-show="(typeChecked.id||typeChecked.id===0)&&typeChecked.list&&typeChecked.list.length>0">
          <button :class="{'active':item.checked}" v-for="(item,index) of typeChecked.list"
            @click="checkSmallType(index)">{{item.mc}}</button>
        </div>
        <div class="item type-box" v-show="typeChecked.id||typeChecked.id===0">
          <button :class="{'active':sjxx=='限期整改'}" @click="checkSjxx('限期整改')">限期整改</button>
          <button :class="{'active':sjxx=='即查即改'}" @click="checkSjxx('即查即改')">即查即改</button>
        </div>
      </div>

      <!--<div class="security">
        <div class="xuncont">
          <p>巡查内容</p>
        </div>

        <div class="boxitem">
          <textarea placeholder="请输入文字内容(500字以内)" id="txtbxnr" v-model="txtbxnr" maxlength="500" ref="count"></textarea>
        </div>

        <div class="ly_tc" :class="{'isShow':isLy}">
          <img src="../../../assets/images/ly_dt.gif" alt="" />
        </div>
        <div class="yuyin_list">
          <div class="ly_start" :class="{'isShow':!yyObj.url,'noShow':yyObj.url}">
            <span class="ly" @touchstart="record($event)" @touchend="recordStop">
              <img src="../../../assets/images/mkf.png" />
              <span>按住说话</span>
            </span>
          </div>
          <div class="ly_play" :class="{'isShow':yyObj.url,'noShow':!yyObj.url}" data-url="null">
            <div>
              <span class="ly" @click="play">
                <img v-show="isPlay" src="../../../assets/images/play_dt.gif" />
                <img v-show="!isPlay" src="../../../assets/images/play.png" />
                <span class="ly_s">{{ yyObj.duration ? (yyObj.duration/1000)+'"' : '0"' }}</span>
              </span>
              <img class="del_ly" src="../../../assets/images/delete.png" @click="clickDelete" />
              <img class="zhuan" src="../../../assets/images/zhuan.png" @click="clickZhuan" />
            </div>
          </div>
        </div>
        <ul class="img-box img_upload">
          <div class="img-item radius-m" @click="showPop"></div>
        </ul>
        <ul class="img-box imgs_ul" v-show="list_img.length>0">
          <li class="img-item radius-m img-list" :class="{'show-desc':obj.showDesc}" v-for="(obj,i) of list_img"
            :key="i">
            <div class="img-content">
              <img class="img-src img_tu" :src="show_path + obj.path" />
              <div class="img-group">
                <div class="img-btn">
                  <div class="del-btn" @click.stop="del(i,'img')">X</div>
                </div>
                <div class="img-btn">
                  <div class="desc-btn" @click.stop="showDesc(i)">A</div>
                </div>
              </div>
            </div>
            <input class="img-desc" type="text" :style="i === number ? 'display: block;' : ''" @click.stop="stopMP"
              placeholder="请输入描述" v-model="imgText[i]" />
          </li>
        </ul>
        <ul class="video-list" v-show="list_mv.length>0">
          <video controls v-for="(obj,i) of list_mv">
            <source :src="show_path+obj.path" type="video/mp4">
            <source :src="show_path+obj.path" type="video/ogg">
            您的浏览器不支持Video标签。
          </video>
          <div class="del" @click.stop="del(i,'mv')"><img src="../../../assets/images/delete.png" /></div>
        </ul>
      </div>-->

      <div class="chooselist">
        <div class="panduan" v-for="(v,index) of yinhuan_list" :key="index">
          <div class="panduan_title">{{v.name}}</div>
          <div class="panduan_choose">
            <div @click="changeYinhuan(index,0)" class="yes" :class="v.isok===0?'active':''">是</div>
            <div @click="changeYinhuan(index,1)" class="no" :class="v.isok===1?'active':''">否</div>
          </div>
        </div>
      </div>

    </div>
    <div class="btns">
      <div class="button" @click="submit">下一步</div>
    </div>
    <van-popup v-model="btm_show" position="bottom">
      <div v-if="terminal === true" class="btm_tk_item" @click="sp">上传视频</div>
      <div class="btm_tk_item" @click="pz">拍照</div>
      <div class="btm_tk_item btm_tk_item-end" @click="xc">从手机相册选择</div>
      <div class="btm_tk_cancle" @click="btm_show = false">取消</div>
    </van-popup>

    <div class="tk" v-show="showZxrwTk">
      <div class="tk-bg" @click="closeTk"></div>
      <div class="tk-box">
        <div class="tk-head">
          <div class="tk-head-title">专项任务</div>
          <img class="tk-head-close" src="../../../assets/images/tk_x.png" @click="closeTk">
        </div>
        <div class="tk-list">
          <template v-for="(item,index) of zxrwShowList">
            <div class="tk-item">
              <div class="tk-item-value">{{item.name}}</div>
            </div>
            <div class="tk-item tk-item-option" v-for="(v,ind) of item.list" :class="{'tk-item-checked':v.checked}"
              @click="checkedZxrw(index,ind)">
              <div class="tk-item-value">{{v.name}}</div>
            </div>
          </template>
        </div>
        <div class="tk-btns">
          <div class="tk-btn radius-m" @click="zxrwTkSubmit">确定</div>
        </div>
      </div>
    </div>


    <div class="tk tk-cyry" v-show="showCyryTk">
      <div class="tk-bg" @click="closeTk"></div>
      <div class="tk-box">
        <div class="tk-head">
          <div class="tk-head-title">参加人员</div>
          <img class="tk-head-close" src="../../../assets/images/tk_x.png" @click="closeTk">
        </div>
        <div class="tk-list">
          <div class="tk-item">
            <div class="tk-item-value">人数</div>
            <input type="text" placeholder="请输入" v-model="cyryShowNum" />
          </div>
          <div class="tk-item" v-show="qujiList_show.length>0">
            <div class="tk-item-value">区级</div>
          </div>
          <div class="tk-item" v-show="qujiList_show.length>0">
            <div class="tk-item-option" v-for="(v,index) of qujiList_show" :class="{'tk-item-checked':v.checked}"
              @click="checkedQuji(index)">
              <div class="tk-item-value">{{v.username}}</div>
            </div>
          </div>

          <div class="tk-item" v-show="jiedaoList_show.length>0">
            <div class="tk-item-value">部门/街道</div>
          </div>
          <div class="tk-item" v-show="jiedaoList_show.length>0">
            <div class="tk-item-option" v-for="(v,index) of jiedaoList_show" :class="{'tk-item-checked':v.checked}"
              @click="checkedJiedao(index)">
              <div class="tk-item-value">{{v.username}}</div>
            </div>
          </div>

          <div class="tk-item" v-show="shequList_show.length>0">
            <div class="tk-item-value">社区</div>
          </div>
          <div class="tk-item" v-show="shequList_show.length>0">
            <div class="tk-item-option" v-for="(v,index) of shequList_show" :class="{'tk-item-checked':v.checked}"
              @click="checkedShequ(index)">
              <div class="tk-item-value">{{v.username}}</div>
            </div>
          </div>

        </div>
        <div class="tk-btns">
          <div class="tk-btn radius-m" @click="cyryTkSubmit">确定</div>
        </div>
      </div>
    </div>

    <div class="tk type-tk" v-show="showTypeTk">
      <div class="tk-bg" @click="closeTk"></div>
      <div class="tk-box">
        <div class="tk-list-left">
          <div class="tk-item tk-item-option" v-for="(v,ind) of typeList"
            :class="{'tk-item-checked':v.id===typeCheckedObj.dl_id}" @click="checkTypeDl(v)">
            <div class="tk-item-value">{{v.mc}}</div>
          </div>
        </div>
        <div class="tk-list-right">
          <div v-for="(v,index) of typeList" v-show="v.id===typeCheckedObj.dl_id">
            <div class="tk-item tk-item-option" v-for="(o,ind) of v.list"
              :class="{'tk-item-checked':o.id===typeCheckedObj.id}" @click="checkType(o,ind)">
              <div class="tk-item-value">{{o.mc}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tk tk-tishi" v-show="tishi">
      <div class="tk-bg" @click="closeTk"></div>
      <div class="tk-box">
        <div class="tk-head">
          <div class="tk-head-title">提示</div>
          <img class="tk-head-close" src="../../../assets/images/tk_x.png" @click="closeTk">
        </div>
        <div class="tk-list">
          <div class="tk-item">请完善巡查内容</div>
        </div>
        <div class="tk-btns">
          <div class="tk-btn radius-m" @click="closeTk">确定</div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  import upload from "../../../assets/js/upload_vue.js"
  import audio from "../../../assets/js/audio.js"
  import { Toast } from "vant";
  import terminal from "../../../assets/js/terminal";
  export default {
    name: 'hard_work',
    data() {
      return {
        showZxrwTk: false,//是否显示专项任务弹框
        showCyryTk: false,//是否显示参与人员弹框
        showTypeTk: false,//是否显示类别弹框
        number: null,
        txtbxnr: '',//文字内容
        btm_show: false,//是否显示底部弹框
        list_img: [],//图片列表
        imgText: [],//图片描述列表
        show_path: null,//图片或视频显示路径
        details: {},
        list_mv: [],

        zxrwList: [],//专项任务弹框列表--结果
        zxrwShowList: [],//专项任务列表
        hasZxrw: false,//是否已经选了专项任务

        qujiList: [],//区级人员列表
        qujiList_show: [],//区级人员列表(弹框)
        qujiNum: 0,//区级人员数量
        jiedaoList: [],//街道人员列表
        jiedaoList_show: [],//街道人员列表(弹框)
        jiedaoNum: 0,//街道人员数量
        shequList: [],//社区人员列表
        shequList_show: [],//社区人员列表(弹框)
        shequNum: 0,//社区人员数量

        hasCyry: false,//是否已经选了参与人员
        cyryNum: null,//参与人数
        cyryShowNum: null,//参与人数

        typeList: [],//类别弹框列表

        typeCheckedObj: {//类别临时选中项，关闭弹出后就没用了
          dl_id: null,
          dl_mc: null,
          id: null,
          mc: null
        },
        typeChecked: {//类别选中项
          dl_id: null,
          dl_mc: null,
          id: null,
          mc: null,
          list: []
        },
        sjxx: '',//三级选项
        tishi: false,
        userId: null,
        isLy: false,//是否正在录音
        isPlay: false,//是否正在播放录音
        yyObj: {},//语音对象
        yinhuan_list: []//隐患选项列表
      };
    },
    components: {
      [Toast.name]: Toast
    },
    beforeCreate() {
      document.addEventListener("plusready", this.plusReady, false);
    },
    destroyed() {
      setTimeout(() => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
    mounted() {
      var _this = this;
      this.userId = localStorage.getItem("userId"); //用户id
      this.show_path = this.$global_msg.Url.hosts + '';
      this.terminal = terminal.terminals().android;
      this.getZxrwList();
      this.getCyryList();
      this.getTypeList();
      this.getYinhuan();
      audio.init(this.mui);

      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.back();
      // }, false);
    },
    methods: {
      plusReady: function () {

      },
      back() {//返回
        this.$router.push("/community_list");
      },
      getYinhuan() {//获取隐患列表
        var _this = this;
        _this.axios.get(_this.$global_msg.Url.host + "/Xx/selectCheckInFo?id=24049&userId=" + _this.userId + "&type=2")
          .then(res => {
            console.log(res);
            if (res && res.data && res.data.rows && res.data.rows.CheckInFo) {
              res.data.rows.CheckInFo.forEach((v, index) => {
                if (v.isok == 0) {
                  res.data.rows.CheckInFo[index].isok = "是"
                } else if (v.isok == 1) {
                  res.data.rows.CheckInFo[index].isok = "否"
                }
              })
              _this.yinhuan_list = res.data.rows.CheckInFo;
            } else {
              _this.yinhuan_list = [];
            }
            //this.patrolTroubleshootId=res.data.rows.patrolTroubleshootId
            //localStorage.setItem("patrolTroubleshootId",res.data.rows.patrolTroubleshootId)
          }).catch(error => {
            this.$terminal._error(error)
          });
      },
      changeYinhuan(index, isok) {
        if (isok === 0) {
          if (this.yinhuan_list[index].isok === 1) {
            //this.tishi=true
            //this.index=index
            this.yinhuan_list[index].isok = isok;
          } else {
            this.yinhuan_list[index].isok = isok;
            var name = this.yinhuan_list[index].name + ",,," + this.yinhuan_list[index].isok
            this.axios.get(
              `${this.$global_msg.Url.host}/Xx/updateSearchInformation?patrolCheckTheDictionaryVo=${name}&id=24049&userId=${this.userId}&type=2`
            ).then(res => {
              console.log(res)
            })
              .catch(error => {
                this.$terminal._error(error)
              });
          }
        } else {
          sessionStorage.setItem("foulist", JSON.stringify(this.yinhuan_list[index]))
          this.$router.push("/yinhuanhard");
        }
      },
      //录音
      record(event) {
        var _this = this;
        _this.isLy = true;
        audio.stop();
        audio.record(function (data) {
          console.log(data);
          _this.isLy = false;
          _this.yyObj = data;
          _this.$forceUpdate();
        }, function (msg) {
          console.log(msg)
          _this.$toast(msg);
          _this.isLy = false;
          _this.$forceUpdate();
        });
        event.preventDefault();
      },
      //停止录音
      recordStop() {
        this.isLy = false;
        audio.stop();
        this.$forceUpdate();
      },
      //播放录音或停止播放录音
      play() {
        var _this = this;
        audio.stop();
        if (_this.isPlay) {
          _this.isPlay = false;
          _this.$forceUpdate();
        } else {
          _this.isPlay = true;
          _this.$forceUpdate();
          audio.play(_this.yyObj.url, function () {
            _this.isPlay = false;
            _this.$forceUpdate();
          }, function (msg) {
            _this.$toast(msg);
            _this.isPlay = false;
            _this.$forceUpdate();
          });
        }
      },
      getRymc(list) {//获取人员的名字
        if (list && list.length > 0) {
          var mcStr = '';
          for (var n = 0; n < list.length; n++) {
            if (list[n].checked) {
              mcStr += list[n].username + ',';
            }
          }
          if (mcStr) {
            mcStr = mcStr.substring(0, mcStr.length - 1);
          }
          return mcStr;
        } else {
          return '';
        }
      },
      getZxrwList() {//获取专项任务列表数据
        var _this = this;
        _this.axios.get(_this.$global_msg.Url.host + "/partroInspection/selectTask?id=24049&userId=" + _this.userId + "&type=2").then(res => {
          console.log(res);
          _this.zxrwList = res.data.rows.task;
          _this.zxrwShowList = res.data.rows;
        }).catch(error => {
          this.$terminal._error(error)
        });
      },
      getCyryList() {//获取参与人员列表数据
        var _this = this;
        _this.axios.get(_this.$global_msg.Url.host + "/Xx/selectPersonnelLevel?id=24049&userId=" + _this.userId + "&type=2").then(res => {
          console.log(res.data.rows);
          _this.qujiList = res.data.rows.quji;
          _this.qujiList_show = res.data.rows.quji;
          _this.jiedaoList = res.data.rows.jiedao;
          _this.jiedaoList_show = res.data.rows.jiedao;
          _this.shequList = res.data.rows.shequ;
          _this.shequList_show = res.data.rows.shequ;
        }).catch(error => {
          this.$terminal._error(error)
        });
      },
      getTypeList() {//获取类别列表数据
        var _this = this;
        _this.typeList = [
          {
            mc: '生产安全',
            id: 1,
            list: [
              {
                mc: '易燃危化',
                id: 11,
                arr: [
                  { mc: '存储', id: 111 },
                  { mc: '运输', id: 112 }
                ]
              },
              {
                mc: '特种设备',
                id: 12,
                arr: [
                  { mc: '电梯', id: 121 },
                  { mc: '锅炉', id: 122 }
                ]
              },
              {
                mc: '道路交通',
                id: 13,
                arr: [
                  { mc: '道路防护', id: 131 },
                  { mc: '桥梁涵洞', id: 132 },
                  { mc: '水上船舶', id: 133 },
                  { mc: '指示标牌', id: 134 }
                ]
              },
              {
                mc: '建筑施工',
                id: 14,
                arr: [
                  { mc: '安全防护', id: 141 },
                  { mc: '脚手架', id: 142 },
                  { mc: '吊装吊篮', id: 143 },
                  { mc: '高空坠物', id: 144 },
                  { mc: '施工用电', id: 145 }
                ]
              },
              {
                mc: '市政管网',
                id: 15,
                arr: [
                  { mc: '排水', id: 151 },
                  { mc: '电气通信管线', id: 152 },
                  { mc: '化粪池', id: 153 },
                  { mc: '污水排放', id: 154 }
                ]
              }
            ]
          },
          {
            mc: '消防安全',
            id: 2,
            list: [
              { mc: 'JJJJJ', id: 9 },
              { mc: 'KKKKK', id: 10 },
              { mc: 'LLLL', id: 11 },
              { mc: 'MMMMM', id: 12 },
              { mc: 'NNNN', id: 13 },
              { mc: 'OOOOO', id: 14 }
            ]
          },
          {
            mc: '房屋建筑',
            id: 57,
            list: [
              { mc: 'PPPPP', id: 15 },
              { mc: 'QQQQ', id: 16 },
              { mc: 'RRRR', id: 17 },
              { mc: 'SSSS', id: 18 },
              { mc: 'TTTT', id: 19 },
              { mc: 'WWWW', id: 20 },
              { mc: 'VVVVV', id: 21 }
            ]
          },
          {
            mc: '自然灾害',
            id: 58,
            list: [
              { mc: 'UUUUU', id: 22 },
              { mc: 'XXXXX', id: 23 },
              { mc: 'YYYYY', id: 24 },
              { mc: 'ZZZZZ', id: 25 },
              { mc: '1111', id: 26 },
              { mc: '2222', id: 27 },
              { mc: '3333', id: 28 }
            ]
          },
          {
            mc: '其他安全',
            id: 59,
            list: [
              { mc: '444', id: 29 },
              { mc: '555', id: 30 },
              { mc: '666', id: 31 }
            ]
          }
        ];
      },
      openZxrwTk() {//打开专项任务弹框
        var _this = this;
        _this.zxrwShowList = JSON.parse(JSON.stringify(_this.zxrwList));
        _this.showZxrwTk = true;
        $("html").css("overflow", "hidden");
        $("body").css("overflow", "hidden");
      },
      openCyryTk() {//打开参与人员弹框
        var _this = this;
        _this.qujiList_show = JSON.parse(JSON.stringify(_this.qujiList));
        _this.jiedaoList_show = JSON.parse(JSON.stringify(_this.jiedaoList));
        _this.shequList_show = JSON.parse(JSON.stringify(_this.shequList));

        if (_this.cyryNum) {
          _this.cyryShowNum = _this.cyryNum - 1;
        } else {
          _this.cyryShowNum = null;
        }
        _this.showCyryTk = true;
        $("html").css("overflow", "hidden");
        $("body").css("overflow", "hidden");
      },
      openTishi() {//打开提示弹框
        var _this = this;
        _this.tishi = true;
        $("html").css("overflow", "hidden");
        $("body").css("overflow", "hidden");
      },
      openTypeTk() {//打开类别弹框
        var _this = this;

        if (_this.typeChecked.dl_id && _this.typeChecked.id) {
          _this.typeCheckedObj = {
            dl_id: _this.typeChecked.dl_id,
            dl_mc: _this.typeChecked.dl_mc,
            id: _this.typeChecked.id,
            mc: _this.typeChecked.mc
          }
        } else {
          if (_this.typeList.length > 0) {
            _this.typeCheckedObj = {
              dl_id: _this.typeList[0].id,
              dl_mc: _this.typeList[0].mc
            }
          }
        }

        _this.showTypeTk = true;
        $("html").css("overflow", "hidden");
        $("body").css("overflow", "hidden");
      },
      closeTk() {//关闭弹出框
        this.showZxrwTk = false;
        this.showCyryTk = false;
        this.showTypeTk = false;
        this.tishi = false;
        $("html").css("overflow", "auto");
        $("body").css("overflow", "auto");
      },
      checkedZxrw(index, ind) {//选中专项任务
        if (this.zxrwShowList[index].list[ind].checked) {
          this.zxrwShowList[index].list[ind].checked = false;
        } else {
          for (var n = 0; n < this.zxrwShowList[index].list.length; n++) {
            this.zxrwShowList[index].list[n].checked = false;
          }
          this.zxrwShowList[index].list[ind].checked = true;
        }
        this.$forceUpdate();
      },
      checkedQuji(index) {//选中区级人员
        if (this.qujiList_show[index].checked) {
          this.qujiList_show[index].checked = false;
        } else {
          this.qujiList_show[index].checked = true;
        }
        this.getCyryNum();
        this.$forceUpdate();
      },
      checkedJiedao(index) {//选中街道人员
        if (this.jiedaoList_show[index].checked) {
          this.jiedaoList_show[index].checked = false;
        } else {
          this.jiedaoList_show[index].checked = true;
        }
        this.getCyryNum();
        this.$forceUpdate();
      },
      checkedShequ(index) {//选中社区人员
        if (this.shequList_show[index].checked) {
          this.shequList_show[index].checked = false;
        } else {
          this.shequList_show[index].checked = true;
        }
        this.getCyryNum();
        this.$forceUpdate();
      },
      getCyryNum() {//计算参与人员数量
        var num = 0;
        for (var n = 0; n < this.qujiList_show.length; n++) {
          if (this.qujiList_show[n].checked) {
            num++;
          }
        }
        for (var n = 0; n < this.jiedaoList_show.length; n++) {
          if (this.jiedaoList_show[n].checked) {
            num++;
          }
        }
        for (var n = 0; n < this.shequList_show.length; n++) {
          if (this.shequList_show[n].checked) {
            num++;
          }
        }
        this.cyryShowNum = num;
        this.$forceUpdate();
      },
      checkTypeDl(v) {//选中类别大类
        this.typeCheckedObj.dl_id = v.id;
        this.typeCheckedObj.dl_mc = v.mc;
        this.$forceUpdate();
      },
      checkType(o, ind) {//选中类别
        this.typeChecked = {
          dl_id: this.typeCheckedObj.dl_id,
          dl_mc: this.typeCheckedObj.dl_mc,
          id: o.id,
          mc: o.mc,
          list: o.arr
        }
        this.sjxx = '';
        this.closeTk();
      },
      checkSmallType(index) {//点击类型按钮组
        this.typeChecked.list[index].checked = !this.typeChecked.list[index].checked;
        this.$forceUpdate();
      },
      checkSjxx(sjxx) {//点击三级选项按钮组
        if (this.sjxx == sjxx) {
          this.sjxx = '';
        } else {
          this.sjxx = sjxx;
        }
        this.$forceUpdate();
      },
      zxrwTkSubmit() {//专项任务弹框确定
        var _this = this;
        _this.zxrwList = JSON.parse(JSON.stringify(_this.zxrwShowList));
        var hasZxrw = false;
        for (var n = 0; n < _this.zxrwList.length; n++) {
          var flag = false;
          for (var m = 0; m < _this.zxrwList[n].list.length; m++) {
            if (_this.zxrwList[n].list[m].checked) {
              hasZxrw = true;
              flag = true;
            }
          }
          _this.zxrwList[n].checked = flag;
        }
        _this.hasZxrw = hasZxrw;
        _this.closeTk();
      },
      cyryTkSubmit() {//参与人员弹框确定
        var num = 0;
        var qujiNum = 0
        var jiedaoNum = 0;
        var shequNum = 0;
        for (var n = 0; n < this.qujiList_show.length; n++) {
          if (this.qujiList_show[n].checked) {
            num++;
            qujiNum++;
          }
        }
        for (var n = 0; n < this.jiedaoList_show.length; n++) {
          if (this.jiedaoList_show[n].checked) {
            num++;
            jiedaoNum++;
          }
        }
        for (var n = 0; n < this.shequList_show.length; n++) {
          if (this.shequList_show[n].checked) {
            num++;
            shequNum++;
          }
        }
        this.cyryNum = num + 1;
        this.qujiNum = qujiNum;
        this.jiedaoNum = jiedaoNum;
        this.shequNum = shequNum;

        this.qujiList = JSON.parse(JSON.stringify(this.qujiList_show));
        this.jiedaoList = JSON.parse(JSON.stringify(this.jiedaoList_show));
        this.shequList = JSON.parse(JSON.stringify(this.shequList_show));

        this.hasCyry = true;
        this.closeTk();
      },
      //删除录音
      clickDelete() {
        this.yyObj = {};
        /*
        const params = {
          patrolTroubleshoot: that.patrolId,
          patrolTroubleshootInfoId: that.id,
          deleteUrl: this.details.contract
        }
        if (this.details.contract !== '') {
          that.axios.get(`${that.$global_msg.Url.host}/partroInspection/deleteVoice`,
            { params }).then(res => {
              console.log(res)
          })
        }*/
      },
      //语音转文字
      clickZhuan() {
        var _this = this;
        var path = _this.yyObj.url;
        audio.zhuan(path, function (data) {
          _this.txtbxnr += data
          if (_this.txtbxnr.length >= 500) {
            // _this.txtbxnr=res
            return _this.$toast('文字限制在500字以内!')
          }
        }, function (msg) {
          _this.$toast(msg)
        })
      },
      clickValue(e) {//点击后光标移到最后
        var t = $(e.currentTarget).val();
        $(e.currentTarget).val("").focus().val(t);
      },
      submit() {
        let that = this;
        let ly_file = that.yyObj.url;
        let second = (that.yyObj.duration / 1000) + '"';
        that.openTishi();
        return;
        if (that.name !== '巡查') {
          if (that.hidden === 0) {
            Toast('请选择隐患类别！')
          } else if (that.txtbxnr === '' || ly_file === null) {
            Toast('请填写内容或录音！')
          } else if (that.list_img.length < 1) {
            Toast('请添加图片！')
          } else {
            that.updata_img(ly_file, second)
          }
        } else {
          if (that.txtbxnr === '' || ly_file === null) {
            Toast('请填写内容或录音！')
          } else if (that.list_img.length < 1) {
            Toast('请添加图片！')
          } else {
            that.updata_img(ly_file, second)
          }
        }
      },
      updata_img(ly_file, second) {
        let that = this;
        plus.nativeUI.showWaiting("正在加载");
        let task = plus.uploader.createUpload(
          that.$global_msg.Url.host + '/partroInspection/uploadFiles',
          {
            method: "POST"
          },
          function (t, status) {
            // 上传完成
            let res = JSON.parse(t.responseText);
            if (status == 200) {
              plus.nativeUI.closeWaiting();
              if (res.code === 200) {
                that.$router.push("/hard_work");
              } else {
                Toast('上传失败！')
              }
            }
          }
        );
        let a = ''
        that.list_img.map(res => {
          a += ',' + res.imgs
        })
        let c = a.substring(1)
        task.addFile(ly_file, {
          key: "multipartFile"
        }); //上传的录音文件
        task.addData("imgurl", c + ""); //3.27_this改为this
        task.addData("videourl", that.list_mv.toString() + "");
        task.addData("title", that.txtbxnr + "");
        task.addData("patrolTroubleshootInfoId", Number(that.id) + "");
        task.addData("patrolTroubleshoot", that.patrolId + "");
        task.addData("yhlb", that.hidden + "");
        task.addData("contractime", second + "");
        task.addData("isUpdate", that.isNo + "");
        task.addData("imgText", that.imgText.toString());
        task.start();
      },
      stopMP() {
      },
      //  下拉框显示
      showPop() {
        this.btm_show = true
      },
      pz() {//拍照
        var _this = this;
        _this.btm_show = false;
        upload.paizhao(function (path) {
          console.log(path);
          _this.uploadImg(path);
        }, function (msg) {
          _this.$toast(msg);
        });
      },
      xc() {//相册
        var _this = this;
        _this.btm_show = false;
        upload.xiangce('image', true, function (path) {
          console.log(path);
          path.map(res => {
            _this.uploadImg(res);
          })
        }, function (msg) {
          _this.$toast(msg);
        });
      },
      sp() {//视频
        var _this = this;
        _this.btm_show = false;
        upload.xiangce('video', false, function (path) {
          console.log(path);

          //获取视频信息
          plus.io.getVideoInfo({
            filePath: path,
            success: function (data) {
              console.log(data);
              console.log(data.duration)
              //视频时间15秒以内才上传
              if ((data.duration * 1) > 15) {
                _this.$toast('上传的视频时间请在15秒以内');
                return;
              } else {
                _this.uploadVideo(path);
              }
            },
            fail: function (e) {
              _this.$toast(e.msg);
            }
          });

        }, function (msg) {
          _this.$toast(msg);
        });
      },
      uploadImg(path) {//上传图片
        var _this = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        var params = {};
        upload.uploadImg(_this.$global_msg.Url.hosts + '/partroInspection/uploadImg', 'POST', params, path, 'multipartFile', function (data) {
          if (data.code == 200) {
            _this.list_img.push({
              path: data.rows
            })
          } else {
            _this.$toast(data.msg);
          }
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
        }, function (msg) {
          _this.$toast(msg);
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
        });
      },
      uploadVideo(path) {//上传视频
        var _this = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        var params = {};
        upload.uploadVideo(_this.$global_msg.Url.hosts + '/partroInspection/uploadMV', 'POST', params, path, 'multipartFile', function (data) {
          data = JSON.parse(data);
          if (data.code == 200) {
            _this.list_mv.push({
              path: data.rows
            });
          } else {
            console.log(data);
            _this.$toast(data.msg);
          }

          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
        }, function (msg) {
          _this.$toast(msg);
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
        });
      },
      showDesc(i) {//显示图片描述
        this.list_img[i].showDesc = !this.list_img[i].showDesc;
        this.$forceUpdate();
      },
      del(i, type) {//删除图片
        if (type == 'img') {
          if (this.list_img[i].id) {//不是新上传的图片
            this.delImg.push(this.list_img[i].id);
            this.list_img.splice(i, 1);
          } else {
            this.list_img.splice(i, 1);
          }
        } else {
          if (this.list_mv[i].id) {//不是新上传的视频
            this.delMv.push(this.list_mv[i].id);
            this.list_mv.splice(i, 1);
          } else {
            this.list_mv.splice(i, 1);
          }
        }
      },
    }
  }
</script>

<style scoped>
  * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .body {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    background-color: #f7f7f9;
  }

  .boxitem {
    /* height: 1.3889rem; */
    padding: 0px 0.342593rem;
    font-size: 0.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    overflow: hidden;
    margin-left: 0.138888rem;
    margin-right: 0.203703rem;
    width: auto;
  }

  .boxitem textarea {
    width: 100%;
    padding-top: 0.3704rem;
    height: 3.125rem;
    overflow: hidden;
  }

  .btm_tk_item {
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    text-align: center;
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
  }

  .btm_tk_item:first-child {
    border-radius: 0.148148rem 0.148148rem 0 0;
  }

  .btm_tk_item-end {
    border-radius: 0 0 0.148148rem 0.148148rem;
  }

  .btm_tk_cancle {
    font-weight: bolder;
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    text-align: center;
    margin: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
    border-radius: 0.148148rem;
  }

  .leib_jdh {
    background: #EEEEEE;
    border-radius: 0.5rem;
    padding: 0.2rem 0.4rem;
  }

  .active {
    background-color: #2682FD;
    color: white;
  }

  .leib_choos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 1.5rem;
  }

  .leibie {
    background: white;
    margin-top: 0.2rem;
  }

  .picture {
    background: #EEF3F7;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 3rem;
    width: 50%;
    margin: 0 20px;
    border-radius: 0.2rem;
  }

  .picture img {
    width: 1rem;
    margin-bottom: 0.3rem;
  }

  .voice {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.8rem;
    width: 4rem;
    border: 1px solid #F7F7F9;
    color: #5F5D5C;
    margin: 0.3rem;
  }

  .voice img {
    margin-right: 0.2rem;
    width: 0.4rem;
  }

  .words {
    height: 4rem;
    width: 100%;
    border-bottom: 0.037037rem solid #F7F7F9;
  }

  .textarea {
    /* border: 1px solid red; */
    height: 3.5rem;
    width: 100%;
    text-indent: 0.3rem;
    padding: 10px 0
  }

  .xuncont {
    width: auto;
    height: 1rem;
    border-bottom: 0.037037rem solid #F7F7F9;
    line-height: 1rem;
    margin-left: 0.138888rem;
    margin-right: 0.203703rem;
  }

  .xuncont p {
    margin-left: 0.342593rem;
  }

  .security {
    margin-top: 0.2rem;
    background-color: #FFFFFF;
    border-radius: 0.092592rem;
    padding-bottom: 1rem;
  }

  .button {
    width: 100%;
    height: 1rem;
    color: white;
    text-align: center;
    line-height: 1rem;
    background-color: #2B6CFE;
    border-radius: 0.105185rem;
  }

  .contant {
    border: 1px solid white;
    flex: 1;
    width: 100%;
    overflow-y: scroll;
  }

  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  /* 图片列表 */
  .img-box {
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.314814rem;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
  }

  .img-box .img-item {
    width: 4.481481rem;
    height: 2.851851rem;
    background-image: url('../../../assets/images/tianjia.png');
    background-size: 100% 100%;
    margin-bottom: 0.425925rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px #CCCCCC solid;
    border-radius: 30px;
  }

  /* 图片列表的内容和按钮 */
  .img-box .img-item .img-content {
    width: 100%;
    height: 2.814814rem;
    z-index: 10;
    background-color: #FFFFFF;
    position: relative;
  }

  .img-box .img-item .img-content .img-src {
    width: 100%;
    height: 100%;
    z-index: 11;
  }

  .img-box .img-item .img-content .img-group {
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }

  .img-box .img-item .img-content .img-group .img-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px #FFFFFF solid;
  }

  .img-box .img-item .img-content .img-group .img-btn:last-child {
    border-left: none;
  }

  .img-box .del-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }

  .img-box .desc-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }

  /* 图片列表的描述 */
  .img-box .show-desc {
    height: 3.703703rem;
  }

  .img-box .img-item .img-desc {
    width: 100%;
    height: 0.851851rem;
    text-align: center;
    flex: 1;
    background-color: #FFFFFF;
    display: none;
  }

  .img-box .show-desc .img-desc {
    display: block;
  }

  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .img-list:first-child {
    margin-left: 4.814814rem;
  }

  .imgs_ul {
    margin-top: -3.255554rem;
    z-index: 2 !important;
  }

  .img_upload .img-item {
    z-index: 3 !important;
  }

  .yuyin_list {
    width: auto;
    height: 1.4815rem;
    position: relative;
    display: flex;
    padding: 0.2315rem 0.1111111111111111rem 0.2315rem 0.3704rem;
    word-break: break-all;
    font-size: 0.3888888888888889rem;
    background-color: #fff;
    border-bottom: 1Px solid #f2f2f2;
    box-sizing: border-box;
    margin-left: 0.138888rem;
    margin-right: 0.203703rem;
  }

  .ly {
    width: 3.925925rem;
    height: 1rem;
    border: 1Px solid #f2f2f2;
    border-radius: 0.1111rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #757575;
    justify-content: center;
  }

  .ly img {
    width: 0.3704rem;
    height: 0.5rem;
    margin: 0 0.2777777777777778rem;
    margin-right: 0.111111rem;
  }

  .ly_play .ly>span {
    float: right;
    /* margin: 0.282222rem 0.9259259259259259rem 0 0; */
  }

  .ly_start .ly>span {
    float: right;
    /* margin: 0.2037037037037037rem 0.46296296296296297rem 0 0; */
  }

  .del_ly,
  .zhuan {
    width: 0.8518518518518519rem;
    margin: 0.09259259259259259rem 0 0 0.23148148148148148rem;
    height: 0.8518518518518519rem;
  }

  .ly_tc {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    height: 3.7037037037037037rem;
    width: 3.7037037037037037rem;
    border-radius: 0.18518518518518517rem;
    text-align: center;
    z-index: 2000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.3888888888888889rem;
    display: none;
  }

  .ly_tc>img {
    margin: 1rem auto 0 auto;
    width: 1.5rem;
  }

  .yc {
    display: none;
  }

  .ly_play>div {
    display: flex;
  }

  .ly_play {
    display: none;
  }


  /* 表单 */
  .box {
    border-radius: 0.222222rem;
    margin-top: 0.12037rem;
    background-color: #FFFFFF;
  }

  .box-other {
    margin-top: 0.185185rem;
  }

  .item {
    width: auto;
    height: 1.333333rem;
    display: flex;
    align-items: center;
    border-bottom: 1px #f2f2f2 solid;
    margin-left: 0.138888rem;
    margin-right: 0.203703rem;
  }

  .item .item-name {
    margin-left: 0.342593rem;
    margin-right: 0.37037rem;
    flex: 1;
    color: #000000;
    font-size: 0.388888rem;
  }

  .item .item-value {
    width: 5.555555rem;
    padding: 0;
    margin: 0;
    margin-right: 0.111111rem;
    color: #a3a3a3;
    text-align: right;
    font-size: 0.388888rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .item .item-value img {
    width: 0.425925rem;
    height: 0.425925rem;
  }

  .item .item-value .item-add {
    width: 0.925925rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .item .item-value .item-add img {
    margin-right: 0.24074rem;
  }

  .item input {
    text-align: left !important;
  }


  /* 弹框 */
  .tk {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tk .tk-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 31;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .tk .tk-box {
    width: 8.259259rem;
    height: 10.314814rem;
    background-color: #FFFFFF;
    z-index: 32;
    display: flex;
    flex-direction: column;
    border-radius: 0.222222rem;
  }

  .tk .tk-head {
    width: auto;
    height: 1.203703rem;
    font-size: 0.388888rem;
    border-bottom: 1px #f2f2f2 solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 0.333333rem;
    margin-right: 0.277777rem;
  }

  .tk .tk-head .tk-head-title {
    flex: 1;
    height: 1.203703rem;
    display: flex;
    align-items: center;
    margin-left: 0.166666rem;
  }

  .tk .tk-head .tk-head-close {
    width: 0.37037rem;
    height: 0.37037rem;
  }

  .tk .tk-list {
    flex: 1;
    width: 100%;
    overflow-y: scroll;
    font-size: 0.388888rem;
  }

  .tk .tk-item {
    width: auto;
    height: 1.203703rem;
    font-size: 0.388888rem;
    display: flex;
    align-items: center;
    margin-left: 0.333333rem;
    margin-right: 0.277777rem;
    border-bottom: 1px #f2f2f2 solid;
  }

  .tk .tk-item .tk-item-value {
    margin-left: 0.157407rem;
    height: 1.203703rem;
    display: flex;
    align-items: center;
  }

  .tk .tk-item input {
    flex: 1;
    height: 1.203703rem;
    text-align: right;
  }

  .tk .tk-list .tk-item-checked {
    color: #2a6cfe;
  }

  .tk .tk-list .tk-item-option {}

  .tk .tk-list .tk-item-option .tk-item-value {
    margin-left: 0.833333rem;
  }

  .tk .tk-btns {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.333333rem;
    margin-right: 0.277777rem;
    /*border-top: 1px #ddd solid;*/
  }

  .tk .tk-btns .tk-btn {
    width: 3.574074rem;
    height: 1.074074rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #309dfa;
    color: #fff;
    font-size: 0.388888rem;
    margin-top: 0.537037rem;
    margin-bottom: 0.666666rem;
  }

  /*  类别弹框 */
  .type-tk .tk-box {
    flex-direction: inherit;
    height: 6.444444rem !important;
  }

  .type-tk .tk-box .tk-list-left {
    height: auto;
    margin-top: 0.333333rem;
    margin-bottom: 0.333333rem;
    overflow-y: scroll;
    border-right: 1px solid #eeeeee;
  }

  .type-tk .tk-box .tk-list-right {
    flex: 1;
    height: auto;
    margin-top: 0.333333rem;
    margin-bottom: 0.333333rem;
    overflow-y: scroll;
  }

  .type-tk .tk-item {
    border-bottom: none;
    height: 1.1rem;
  }

  .type-tk .tk-list-left .tk-item {
    font-size: 0.388888rem;
    margin-left: 0.462962rem !important;
    margin-right: 0.555555rem !important;
  }

  .type-tk .tk-list-right .tk-item {
    font-size: 0.333333rem;
    margin-left: 0.555555rem;
  }

  .type-tk .tk-item-checked {
    color: #2a6cfe;
  }

  .type-tk .tk-item-option .tk-item-value {
    margin-left: 0 !important;
  }


  /* 参与人员弹框 */
  .tk-cyry .tk-list .tk-item {
    height: auto !important;
    flex-wrap: wrap;
  }

  .tk-cyry .tk-list .tk-item-option {
    width: 33%;
  }

  .tk-cyry .tk-list .tk-item-option .tk-item-value {
    margin-left: 0 !important;
    justify-content: center;
  }

  /* 通用宽度100% */
  .full-width-div {
    height: auto;
    width: 100%;
  }

  /* 类别按钮组 */
  .type-box {
    font-size: 0.388888rem;
    height: auto !important;
    flex-wrap: wrap;
    padding-top: 0.166666rem;
  }

  .type-box button {
    width: 2.722222rem;
    height: 0.888888rem;
    background-color: #efefef;
    border-radius: 0.925925rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.462962rem;
    margin-bottom: 0.222222rem;
  }

  .type-box .active {
    color: #FFFFFF;
    background-color: #2683fd;
  }

  /* 提示弹框 */
  .tk-tishi .tk-box {
    height: 4.629629rem !important;
  }

  .tk-tishi .tk-box .tk-item {
    justify-content: center;
    border-bottom: none;
    height: 100% !important;
  }

  .tk-tishi .tk-btns .tk-btn {
    margin-top: 0;
  }

  /* 视频列表 */
  .video-list {
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.54074rem;
    width: auto;
    height: auto;
    display: flex;
    position: relative;
    flex-direction: column;
  }

  .video-list video {
    width: 100%;
    height: 4.87037rem !important;
    margin-bottom: 0.259259rem;
  }

  .video-list .del {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }

  .video-list .del img {
    width: 100%;
    height: 100%;
  }

  .isShow {
    display: block !important;
  }

  .noShow {
    display: none !important;
  }

  /*隐患列表*/
  .chooselist {
    background: white;
    margin-top: 0.2rem;
    border-radius: 0.2rem;
  }

  .chooselist .panduan_choose {
    display: flex;
  }

  .chooselist .panduan_choose div {
    height: 1rem;
    width: 1.5rem;
    border: 1px solid #999999;
    margin-left: 0.2rem;
    text-align: center;
    line-height: 0.8rem;
    border-radius: 0.1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.444444rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chooselist .panduan {
    height: auto;
    border-bottom: 1px solid #999999;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 0.138888rem;
    margin-right: 0.203703rem;
    width: auto;
  }

  .chooselist .panduan_title {
    width: 55%;
    overflow: hidden;
    /*white-space: nowrap;
    text-overflow: ellipsis;*/
    margin-left: 0.342593rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.388888rem;
  }

  .chooselist .active {
    background-color: #2b6cfe;
    color: #FFFFFF;
  }

  /* 下一步按钮 */
  .btns {
    box-sizing: border-box;
  }

  .btns .button {
    margin: 0.24074rem 0.231481rem;
    width: auto;
  }
</style>